<template>
  <div class="settlement">
    <group>
      <div class="money">
        <div class="num">账户余额 ￥<countup :start-val="0" :start="start" :end-val="balance" :duration="2" class="demo1"></countup></div>
        <div><x-button mini @click.native="show=true">申请提现</x-button></div>
      </div>
    </group>
    <group>
      <datetime @on-change="getData" v-model="startTime" title="开始时间"></datetime>
    </group>
    <group>
      <datetime @on-change="getData" v-model="endTime" title="结束时间"></datetime>
    </group>
    <scroller style="top:175px;">
      <div style="padding-bottom:190px">
        <group>
            <div class="title">收支流水</div>
            <x-table :full-bordered="true" :cell-bordered="true" style="background-color:#fff;">
              <thead style="background-color: #f1f1f1;">
              <tr>
                  <th width="25%">时间</th>
                  <th width="25%">收支类型</th>
                  <th width="25%">金额</th>
                  <th width="25%">状态</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for=" (i,index) in priceData" :key="index">
                  <td>{{i.date}}</td>
                  <td>{{i.price_type_text}}</td>
                  <td>{{i.price}}</td>
                  <td>{{i.status_text}}</td>
              </tr>
              </tbody>
          </x-table>
        </group>
      </div>
    </scroller>
    <popup v-model="show" style="background-color:white;" height="100%" :show-mask="false">
        <div>
          提现
        </div>
    </popup>
  </div>
</template>
<script>
import { Group, Datetime, XTable, XButton, Countup, Popup } from "vux";
export default {
  name: "settlement",
  data() {
    return {
      startTime: new Date().toLocaleDateString("CH").replace(/\//g, "-"),
      endTime: new Date().toLocaleDateString("CH").replace(/\//g, "-"),
      balance: 0,
      start: false,
      priceData: [],
      show:false
    };
  },
  components: {
    Group,
    Datetime,
    XTable,
    XButton,
    Countup,
    Popup
  },
  methods: {
    getData() {
      this.$http
        .get("/api/supplier.fin_report/supplier_price", {
          params: {
            step_section: "search",
            time_s: this.startTime,
            time_e: this.endTime
          }
        })
        .then(res => {
          this.priceData = res.data.data;
        });
    },
    withdrawals() {}
  },
  created() {
    this.getData();
    this.$http.get("/api/supplier.supplier/read").then(res => {
      this.balance = parseFloat(res.data.data.balance);
      this.start = true;
    });
  }
};
</script>
<style scoped>
.money {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  align-items: center;
}
.num {
  font-weight: bold;
  font-size: 18px;
}
.title {
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>